<template>
    <div class="home">
        <div class="header">
            <!-- 页面头部和查询区域 -->
            <div class="headerBox">
                <div class="crumbs">
                    <p><span>设备管理 /</span> <span> 设备分类管理</span></p>
                    <h3>设备分类管理</h3>
                </div>
                <div class="search">
                    <div class="search-left">
                        <!-- <el-form-item label="设备分类名称">
                            <el-input clearable v-model="classifyName" placeholder="请输入" />
                        </el-form-item> -->
                        <el-form-item label="设备分类">
                            <el-select clearable v-model="classifyName" placeholder="设备分类">
                                <el-option label="电梯" value="电梯" />
                                <el-option label="健身器材" value="健身器材" />
                                <el-option label="路灯" value="路灯" />
                                <el-option label="垃圾桶" value="垃圾桶" />
                                <el-option label="灭火器" value="灭火器" />
                                <el-option label="消防设施" value="消防设施" />
                                <!-- <el-option v-for="item in options" :key="item.value" :label="item.label"
                                    :value="item.value" /> -->
                            </el-select>
                        </el-form-item>
                    </div>
                    <div class="search-right">
                        <el-button type="primary" @click="search">查询</el-button>
                        <el-button type="primary" plain @click="reset">重置</el-button>
                    </div>
                </div>
            </div>
            <!-- 新建按钮 -->
            <div class="body">
                <div class="equipment">
                    <span>分类列表</span>
                    <div class="title-btn">
                        <el-button type="primary" @click="dialogVisible = true">+ 新建</el-button>
                        <el-button type="primary" plain @click="batchDel">批量操作</el-button>
                    </div>
                </div>
                <!-- 表格 -->
                <el-table :data="tableData" stripe style="width: 100%" :cell-style="cellStyle"
                    :header-row-style="headerStyle" @selection-change="handleSelectionChange">
                    <el-table-column type="selection" />
                    <el-table-column prop="classifyName" label="设备分类名称" align="center" />


                    <el-table-column prop="monthlyCardStatus" label="状态" align="center">
                        <template #default="scope">
                            <el-switch v-model="scope.row.monthlyCardStatus" active-value="1" inactive-value="0" />
                        </template>
                    </el-table-column>
                    <el-table-column prop="addPeople" label="添加人" align="center" />
                    <el-table-column prop="addTime" label="添加时间" align="center" />
                    <el-table-column label="操作" align="center" width="200">
                        <template #default="scope">
                            <el-button type="primary" text @click="handleEdit()">编辑</el-button>
                            <el-button type="primary" text @click="handleDelete(scope.row.id)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <!-- 分页 -->
                <div class="demo-pagination-block">
                    <Page :total="total" :count="count" :currentPage="page" @handleCurrentChange="handleCurrentChange"
                        @handleSizeChange="handleSizeChange"></Page>
                </div>
            </div>
        </div>
        <!-- 新增 -->
        <el-dialog v-model="dialogVisible" title="新增" width="40%">
            <el-form-item label="设备分类名称" required="true">
                <el-select clearable v-model="addData.classifyName" placeholder="设备分类" style="width:350px">
                    <el-option label="电梯" value="电梯" />
                    <el-option label="健身器材" value="健身器材" />
                    <el-option label="路灯" value="路灯" />
                    <el-option label="垃圾桶" value="垃圾桶" />
                    <el-option label="灭火器" value="灭火器" />
                    <el-option label="消防设施" value="消防设施" />
                </el-select>
            </el-form-item>
            <el-form-item label="添加入" required="true">
                <el-input style="width:350px" clearable v-model="addData.addPeople" placeholder="请输入" />
            </el-form-item>
            <el-form-item label="添加时间" required="true">
                <!-- <el-date-picker type="datetime" style="width:350px" clearable v-model="addData.addTime"
                    placeholder="请输入" /> -->
                <el-date-picker v-model="addData.addTime" type="datetime" placeholder="请输入" format="YYYY/MM/DD hh:mm:ss"
                    value-format="YYYY-MM-DD h:m:s" />
            </el-form-item>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="add">
                        提交
                    </el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>


<script setup lang="ts">
import { ref, onMounted } from "vue";
import router from "../../../router/index";
import Page from "../../../components/Page.vue";
import http from "../../../utils/http";
import { ElMessage, ElMessageBox } from "element-plus";
import { limitShift } from "@floating-ui/core";

const cellStyle = ref({
    height: "60px",
    fontSize: "15px",
});
const headerStyle = ref({
    height: "60px",
    fontSize: "15px",
    color: "black",
});
const multipleSelection = ref([])
const handleSelectionChange = (val) => {
    console.log(val)
    multipleSelection.value = val
    console.log(multipleSelection.value)
}

// let batchDel = ref([])
let tableData = ref([]);
let carstateId = ref("");
let carparkingId = ref("");
let classifyName = ref('');
// let monthlyCardStatus=ref('');
let total = ref(0);
let page = ref(1);
let count = ref(5);
//删除
let handleDelete = (index) => {
    http({
        url: '/equipmentClassification/delete',
        method: "DELETE",
        data: [index]
    }).then(({ data }) => {
        console.log(data);
        if (data.code == 0) {
            getData();
        }
    })
};
//编辑
let handleEdit = () => {
    http({
        url: '/equipmentClassification/add',
        method: 'POST',
        // data: ''
    }).then(({ data }) => {
        console.log(data);
        ElMessageBox.prompt('分类名称', '新增设备分类', {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            // inputPattern:
            //   /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
            // inputErrorMessage: '分类名称',
        })
            .then(({ value }) => {
                ElMessage({
                    type: 'success',
                    message: `提交成功`,
                })
            })
            .catch(() => {
                ElMessage({
                    type: 'info',
                    message: '提交失败',
                })
            })
    })
};
let handleCurrentChange = (val) => {
    console.log(val)
    page.value = val;
    getData();
};
let handleSizeChange = (val) => {
    console.log(val)
    count.value = val;
    getData();
};


// 渲染函数
let getData = () => {
    http({
        url: "/equipmentClassification/list",
        params: {
            page: page.value,
            limit: count.value,
            carstateId: carstateId.value,
            carparkingId: carparkingId.value,
            classifyName: classifyName.value,
        },
    }).then(({ data }) => {
        console.log(data);
        if (data.code == 0) {
            tableData.value = data.data.list;
            total.value = data.data.totalCount;
        }
    });
};

//搜索
let search = () => {
    getData();
};
//重置
let reset = () => {
    carstateId.value = "";
    carparkingId.value = "";
    page.value = 1;
    count.value = 10;
    classifyName.value = '';
    getData();
};
//新建
let dialogVisible = ref(false);
let addData = ref(
    {
        classifyName: '',
        addPeople: '',
        addTime: ''
    }
)
let add = () => {
    http({
        url: '/equipmentClassification/add',
        method: 'POST',
        data: addData.value
    }).then(({ data }) => {
        if (data == 0) {
            console.log(1);
            if (data.code == 0) {
                ElMessage({
                    message: "新增成功",
                    type: "success",
                });
                dialogVisible.value = false;
                getData();
            } else {
                ElMessage.error("新增失败");
            }
        }
    })
}


//批量删除
let batchDel = (index) => {
    http({
        url: "/equipmentClassification/delete",
        method: "DELETE",
        params: { ids: index }
    }).then(({ data }) => {
        console.log(data)
        if (data.code == 0) {
            ElMessage({
                message: "删除成功",
                type: "success",
            });
            getData();
        } else {
            ElMessage.error("删除失败");
        }
    });
}

onMounted(() => {
    console.log("挂载后");
    getData();
});
</script>


<style lang="less" scoped>
.header {
    width: 90%;
    // height: 100%;
    margin: auto;

    .headerBox {
        margin-top: 20px;
        background-color: white;

        .crumbs {
            padding: 15px 20px;
            font-size: 16px;
            border-bottom: 1px solid #ccc;

            p {
                margin-bottom: 10px;

                span:nth-child(1) {
                    color: #8d8d8d;
                }

                span:last-child {
                    color: #000;
                }
            }
        }

        .search {
            width: 93%;
            padding: 15px 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .search-left {
                display: flex;

                div:nth-child(1) {
                    margin-right: 50px;
                }

                .el-input {
                    margin-left: 15px;
                    width: 250px;
                }
            }
        }
    }

    .body {
        padding: 15px 20px;
        margin-top: 20px;
        background-color: white;

        .equipment {
            width: 96%;
            padding-bottom: 20px;
            border-bottom: 1px solid #eee;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .el-table {
            .el-button {
                margin: 0;
            }
        }
    }

    .el-pagination {
        margin-top: 20px;
        // padding-right: 10px;
        justify-content: flex-end;
    }
}
</style>